<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>promise实现ajax</h1>
    <button id='btn'>点击发送ajax</button>
    <script>
        function ajax(type, url, data){
            // 处理数据
            let query = '';
            if(typeof data === 'string') {
                query = data;
            }else if(typeof data === 'object') {
                for(let key in data) {
                    query += key + '=' + data[key] + '&';
                }
                query = query.slice(0, -1);
            }

            return new Promise((resolve, reject) => {
                
                // 能力检测
                let xhr = null;
                if(window.XMLHttpRequest) {
                    // 高级浏览器
                    xhr = new XMLHttpRequest();
                }else if(window.ActiveXObject) {
                    // ie8以下
                    xhr = new ActiveXObject('Microsoft.XMLHttp')
                }else {
                    console.log('浏览器版本过低')
                    // 不知名浏览器
                    reject('浏览器版本过低')
                }
                // 建立tcp连接
                if(type === 'get') {
                    xhr.open(type, url + '?' + query, true);
                    xhr.send()
                }else if(type === 'post') {
                    xhr.open('post', url, true);
                    // 模拟表单数据
                    xhr.setRequestHeader('Content-type', 'application/x-www-from-urlencoded');
                    xhr.send(query);
                }else {
                    console.log('funcition')
                    reject(new Error('type no funcition'))
                }

                //监听状态改变
                xhr.onreadystatechange = function() {
                    
                        if(xhr.readyState === 4) {
                            if(xhr.status === 200) {
                                resolve(xhr.responseText);
                            }else {
                                console.log('404')
                                let rejectd = {code: xhr.status, response: xhr.responseText};
                                reject(rejectd);
                            }
                        }                    
                }          


            })
        }

        let btn = document.getElementById('btn');
        // btn.onclick = function() {
        //     ajax('get', '/get', {username: 'xu', password: 12345})
        //         .then(res => console.log(res,2222), err => console.log(err,1111))
        //         .catch(err => console.log(err,33333))
        // }

        btn.onclick = function() {
            ajax('post', '/post', {username: 'xu', password: 12345})
                .then(res => console.log(res,2222), err => console.log(err,1111))
                .catch(err => console.log(err,33333))
        }
    </script>
    
</body>
</html>